<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0">
		<!-- 网站作者 -->
		<meta name="author" content="queen">
		<!-- 网站描述 -->
		<meta name="description" content="本网站为...类型网站，主要服务对象为...">
		<!-- 网站关键词 -->
		<meta name="keywords" content="关键词1，关键词2，...">
		<!-- 禁止链接高亮 -->
		<meta name="msapplication-tap-highlight" content="no">
		<!-- format-detection为格式检测 -->
		<!-- 禁止手机自动将网页中的电话号码显示为拨号的超链接 -->
		<meta name="format-detection" content="telephone=no">
		<!-- 告诉设备不识别邮箱，点击之后不自动发送 -->
		<meta name="format-detection" content="email=no">
		<!-- 禁止跳转至地图功能页面 -->
		<meta name="format-detection" content="adress=no">
		<!-- UC强制竖屏 -->
		<meta name="screen-orientation" content="portrait">
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360-优先使用 IE 最新版本和 Chrome进行渲染 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<title>注册页面</title>
		<link rel="stylesheet" href="css/register.css" />
		<link rel="stylesheet" href="css/reset.css" />
		<script type="text/javascript" src="js/flexible.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/fastclick.js"></script>
	</head>

	<body>
		<div class="container">
			<div class="nav">
				<a id="back" href="javascript:history.back(-1)"></a>
				<p>注册</p>
			</div>
			<form action="">
				<div class="input-group">
					<span>用户名</span>
					<input type="text" name="nick" id="nick" placeholder="请输入您的昵称" value="" />
				</div>
				<div class="input-group">
					<span>手机号</span>
					<input type="number" name="phone" id="phone" placeholder="请输入您的联系方式" value="" />
				</div>
				<div class="input-group">
					<span>验证码</span>
					<input type="text" name="code" id="code" placeholder="输入验证码" value="" />
					<span id="GainCode">获取验证码</span>
				</div>
				<div class="input-group">
					<span>登录密码</span>
					<input type="password" name="pwd" id="pwd" placeholder="请输入6-20位密码" value="" />
				</div>
				<div class="input-group">
					<span>确认密码</span>
					<input type="password" name="pwd2" id="pwd2" placeholder="请再次输入密码" value="" />
				</div>
				<div class="input-group">
					<span>邀请码</span>
					<input type="text" placeholder="如有 请输入邀请码（非必填）" />
				</div>
				<div class="checked">
					<input type="checkbox" checked="checked" />&nbsp;&nbsp;我已阅读并同意《云安装服务协议》
				</div>
				<div class="submit">
					<button id="submit1">立即注册</button>
				</div>
			</form>
		</div>
		<script type="text/javascript">
			var nick = document.querySelector("#nick");
			var phone = document.querySelector("#phone");
			var code = document.querySelector("#code");
			var pwd = document.querySelector("#pwd");
			var pwd2 = document.querySelector("#pwd2");
			var submit1 = document.querySelector("#submit1");
			var input = document.querySelector(input);
			var GainCode = document.querySelector("#GainCode");
			back.addEventListener("touchstart", function() {
				window.history.go(-1);
			})
			submit1.addEventListener("touchstart", function(e) {
				e.preventDefault();
				if(nick.value == "") {
					nick.placeholder = "昵称不得为空";
					nick.setAttribute("class", "help")
				}
				if(phone.value == "") {
					phone.placeholder = "手机号不得为空";
					phone.setAttribute("class", "tel")
				}
				if(phone.value != "" && !(/^1[3456789]\d{9}$/.test(phone))) {
					alert("您输入的手机号码不正确");
					return false;
				}
				if(code.value == "") {
					code.placeholder = "请输入验证码";
					code.setAttribute("class", "yzm");
				}
				if(pwd.value == "") {
					pwd.placeholder = "密码不得为空";
					pwd.setAttribute("class", "erro");
				}
				if(pwd.value != "" && pwd.value.length < 6 && pwd.value.length < 20) {
					alert("密码至少在6-20位")
					return false;
				}
				if(pwd2.value != "" && pwd.value != pwd2.value) {
					alert("密码输入不一致")
				}
			})
			//获取验证码
			GainCode.addEventListener("touchstart", function() {
				var flag = true;
				var time = 60;
				GainCode.classList.add('disable');
				GainCode.innerText = '已发送';

				if(flag) {
					flag = false;
					var timer = setInterval(function() {
						time--;
						GainCode.innerText = time + ' 秒';
						if(time === 0) {
							clearInterval(timer);
							GainCode.innerText = '重新获取';
							GainCode.classList.remove('disable');
							flag = true;
						}
					}, 1000)
				}
			})

			if('addEventListener' in document) {
				document.addEventListener('DOMContentLoaded', function() {
					FastClick.attach(document.body);
				}, false);
			}
		</script>
	</body>

</html>